<template>
   <div  class="box" v-if="time = $store.state.nowTime==='moon' ? false  : true">
      <div class="ball">
      </div>
      <ul class="clouds">
         <li><span></span></li>
         <li><span></span></li>
      </ul>
      <span class="time" @click="times">
       切换
      </span>
   </div>

   <div  class="box" v-else>
      <div class="ball2">
      </div>
      <ul class="clouds">
         <li><span></span></li>
         <li><span></span></li>
      </ul>
      <span class="time" @click="times">
       切换
      </span>
   </div>

</template>

<script>
export default {
    name: "Sun",
   data(){
       return{
          time:true
       }
   },
   mounted() {


       if(window.localStorage.getItem("nowTime")==='moon')
          this.time=false
   },
   methods:{
      times(){
         let ts = window.localStorage.getItem("nowTime");
         if(ts ==='sun' || ts===null){
            window.localStorage.setItem("nowTime",'moon');
            this.$store.commit("nowTimeStatue",'moon');
         }else{
            window.localStorage.setItem("nowTime",'sun');
            this.$store.commit("nowTimeStatue",'sun');
         }
      },
   }
}
</script>

<style scoped>
.box{
   position: fixed;
   bottom: 0;
   left: 0;
   transition: all .5s;
   z-index: 9999999;

}

@keyframes box {
0%{
      transform: scale(0);
}
   50%{
      transform: scale(1.05);
   }
   100%{
      transform: scale(1);
 }
}
.ball:hover{
   cursor: pointer;
}
   .ball{
       width: 10vw;
       height: 10vw;
       border-radius: 50%;
       background: #8f8c8c;
       box-shadow: 0 0 20px #fff,
            -10px 0 80px #ff0,
       -10px 0 40px #ff2039,
       inset 0 0 50px #fff,
       inset -50px 0 80px #ff0,
       inset 20px 0 50px #ff2039,
       inset -50px 0 200px #ff0,
       inset 20px 0 50px #ff2039;
      animation: sun 6s ease-in-out infinite,floatsSun 3s ease-in-out 0s infinite;

   }
   @keyframes sun {
      50%{
         box-shadow: 0 0 50px #fff,
         -10px 0 80px #ff0,
         -10px 0 40px #ff2039,
         inset 0 0 50px #fff,
         inset -50px 0 80px #ff0,
         inset 50px 0 80px #ff2039,
         inset -50px 0 200px #ff0,
         inset 50px 0 200px #ff2039;
      }
   }
   .clouds{
      display: flex;
   }
   .clouds li{
      position: relative;
      list-style: none;
      width: 4vw;
      height: 3vh;
      border-radius:  1vw;
      background: white;
      margin-top: -20px;
      animation:floats 3s ease-in-out 0s infinite;
      box-shadow: 0 2px 5px 0 #8f8c8c;
   }
   .clouds li:first-child{
      left: 0;
      bottom: 0;
      z-index: 99;
   }
   .clouds li:nth-child(2){
      left: -15%;
      bottom: 0;
      animation-delay: 1s;
     opacity: .8;
   }



   .clouds li span{
      position: absolute;
      display: inline-block;
      width: 1.5vw;
      min-width: 20px;
      min-height: 20px;
      height: 3vh;
      border-radius:  50%;
      background: white;
      transform: translateY(-50%);
      margin-left: 40%;
      border-bottom-color: transparent !important;
   }
   .clouds li:nth-child(2) span{
      margin-left: 40%;

   }
   @keyframes move {
        0%{
           left: 0;
        }
      50%{
         left:30%;
      }
      100%{
         left:0;
      }
   }
   @keyframes floatsSun {
      0%{
         transform: translateY(0);
      }
      50%{
         transform: translateY(-5%);
      }
      100%{
         transform: translateY(0);
      }
   }
   @keyframes floats {
      0%{
        transform: translateX(0);
      }
      50%{
         transform: translateX(-10%);
      }
      100%{
         transform: translateX(0);
      }
   }
   .time{
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: pointer;
      color: white;
      padding: 0.1vw 0.2vw;
      background: rgba(77, 176, 236, 0.5);
      font-size: 15px;
      border-radius: 5px;
   }

.time span:hover{
   cursor: pointer;
}



.ball2{
   width: 10vw;
   height: 10vw;
   border-radius: 50%;
   background: #f3eded;
   box-shadow: 0 0 20px #fff,
   -10px 0 80px #ecece0,
   -10px 0 40px #ecdfe0,
   inset 0 0 50px #fff,
   inset -50px 0 80px #e5e5d7,
   inset 20px 0 50px #f5eeee,
   inset -50px 0 200px #f1f1e7,
   inset 20px 0 50px #f6f1f1;
   animation: sun2 6s ease-in-out infinite,floatsSun 3s ease-in-out 0s infinite;

}
@keyframes sun2 {
   50%{
      box-shadow: 0 0 50px #fff,
      -10px 0 80px #f8f8f4,
      -10px 0 40px #e5dadb,
      inset 0 0 50px #fff,
      inset -50px 0 80px #eeeee5,
      inset 50px 0 80px #ece5e6,
      inset -50px 0 200px #f3f3ee,
      inset 50px 0 200px #f1eaeb;
   }
}
.ball,.ball2{
   animation: box 1s ease-in-out 0s 1 forwards;
}
@media (min-width: 0px) and (max-width: 740px) {
   .clouds{
      display: none !important;
   }
   .time{
      bottom: -10%;
      font-size: 12px;
   }
}
</style>